<template>
  <div class="box">
    <div class="container">
      <div>收货地址</div>
      <div @click="address">添加新地址</div>
      <ul>
        <li v-for="(item, index) in cartProductVoList" :key="index">
          <img :src="item.productMainImage" alt />
          <span>{{item.productName}}</span>
          <span>{{item.quantity}}个</span>
          <span>{{item.productTotalPrice}}元</span>
        </li>
      </ul>
      <div class="footer">
        <span>商品件数:{{cartTotalQuantity}}个</span>
        <span>商品总价:{{cartTotalPrice}}元</span>
        <button @click="goCart">返回购物车</button>
        <button @click="goPay">去结算</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "order-confirm",
  data() {
    return {
      shippingId: "",
      cartProductVoList: [],
      cartTotalPrice: 0,
      cartTotalQuantity: 0,
    };
  },
  created() {
    this.getCartList();
    this.axios.get("/user");
  },
  methods: {
    goPay() {
      const shippingId = this.shippingId;
      if (shippingId)
        this.axios
          .post("/orders", {
            shippingId,
          })
          .then((data) => {
            this.$router.replace("/order/pay/" + data.orderNo);
          });
      else alert("请添加地址");
    },
    goCart() {
      this.$router.back();
    },
    getCartList() {
      this.axios
        .get("/carts")
        .then(({ cartProductVoList, cartTotalPrice, cartTotalQuantity }) => {
          this.cartProductVoList = cartProductVoList; //商品列表
          this.cartTotalPrice = cartTotalPrice; //总价
          this.cartTotalQuantity = cartTotalQuantity; //总数量
        });
    },
    address() {
      this.axios
        .post("/shippings", {
          receiverName: "lin_xi",
          receiverPhone: 18688888888,
          receiverMobile: 18688888888,
          receiverProvince: "北京",
          receiverCity: "北京市",
          receiverDistrict: "海淀区",
          receiverAddress: "中关村",
          receiverZip: 100000,
        })
        .then(({ shippingId }) => (this.shippingId = shippingId));
    },
  },
};
</script>


<style lang="scss" scoped>
.box {
  width: 100%;
  min-width: 1226px;
  height: 1180px;
  background-color: #f5f5f5;
  border-top: solid 1px #f5f5f5;
  .container {
    width: 1226px;
    background: rgba(255, 255, 255, 1);
    margin-top: 30px;
    margin-bottom: 200px;
    padding: 0 63px;
    box-sizing: border-box;
    border-top: solid 1px #fff;

    & > :nth-child(1) {
      color: #333333;
      font-size: 20px;
      margin-top: 38px;
    }
    & > :nth-child(2) {
      width: 271px;
      height: 180px;
      border: 1px solid rgba(229, 229, 229, 1);
      color: #999999;
      font-size: 14px;
      line-height: 180px;
      text-align: center;
      cursor: pointer;
      margin-top: 21px;
    }
    & > :nth-child(3) {
      width: 100%;
      li {
        align-items: center;
        display: flex;
        * {
          flex: 1;
        }
        img {
          width: 100px;
        }
      }
    }
  }
}
</style>